<template>
  <div>
    <div>
      <el-cascader
        style="width: 300px"
        placeholder="设备查询名称"
        :show-all-levels="false"
        :options="varName"
        filterable
        @change="handleChange1"
      ></el-cascader>
      <el-cascader
        style="margin-left: 10px"
        placeholder="设备表"
        :show-all-levels="false"
        :options="tableName"
        filterable
        @change="handleChange2"
      ></el-cascader>
      <el-date-picker
        style="margin-left: 10px"
        v-model="datePicker"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00']"
        value-format="yyyy/MM/dd HH:mm:ss"
      >></el-date-picker>

      <el-button type="primary" style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>

    <el-table
      :data="tableData"
      stripe
      :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="varName" label="设备"></el-table-column>
      <el-table-column prop="startTime" label="起始时间"></el-table-column>
      <el-table-column prop="endTime" label="截止时间"></el-table-column>
      <el-table-column prop="result" label="耗电量" show-overflow-tooltip></el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datePicker: "",
      tableValue: "",
      varValue: "",
      tableName: [
        {
          value: "E_rebiao",
          label: "热表"
        },
        {
          value: "electricity_dianbiao",
          label: "电表"
        },
        {
          value: "P_yali",
          label: "压力"
        },
        {
          value: "T_wendu",
          label: "温度"
        },
        {
          value: "tank_shuiguan",
          label: "水罐表"
        },
        {
          value: "jizu",
          label: "机组"
        },
      ],

      varName: [
        {
          value: "机组1电量",
          label: "机组1电量"
        },
        {
          value: "机组2电量",
          label: "机组2电量"
        },
        {
          value: "机组3电量",
          label: "机组3电量"
        },
        {
          value: "机组4电量",
          label: "机组4电量"
        }
      ],

      tableData: [] // 所有的数据
    };
  },

  methods: {
    handleChange1(value) {
      this.varValue = value + "";
      console.log(this.varValue);
    },
    handleChange2(value) {
      this.tableValue = value + "";
      console.log(this.tableValue);
    },

    reset() {
      this.varName = "";
      this.tableName = "";
      this.datePicker = "";
     
    },
    load() {
      // console.log(this.datePicker[0]);
      // console.log(this.datePicker[1]);
      this.$request
        .post("http://localhost:8081/electricity", {
          varName: this.varValue,
          tableName: this.tableValue,
          startTime: this.datePicker[0],
          endTime: this.datePicker[1]
        })
        .then(res => {
          //传入数据
          this.tableData = res.data.records;
        });
    }
  }
};
</script>

<style scoped>
</style>